<script setup>
  import DeliveryAddress from './components/Delivery-Address.vue'
  import CommodityNav from './components/Commodity-Nav.vue'
  import {
    reactive,
    onMounted
  } from 'vue'
  const addressList = reactive({
    name: 'XXX',
    phone: '13201231111',
    site: "江西省上饶市信州区恒大名都花园11栋2单元601"
  })
  const commodity = reactive({
    url:"https://img.js.design/assets/img/66c4605be6fc3110ca4c89f5.png#77b4d311506bb9a28f8b84cd3a9c9f5f",
    title:"作品文案作品文案作品文案作品文案作品文案作品文案作品文案作品",
    number:10,
    price:20,
    name:"连衣裙"
  })
  onMounted(() => {
    addressList.phone = maskPhoneNumber(addressList.phone)
  })
  function onPayment(e){
    console.log(e,4444)
  }
  //手机号处理
  function maskPhoneNumber(phoneNumber) {
    if (phoneNumber.length !== 11) {
      return phoneNumber
    }
    const firstPart = phoneNumber.slice(0, 3);
    const secondPart = phoneNumber.slice(7);
    const maskedPart = '****';

    return firstPart + maskedPart + secondPart;
  }
</script>
<template>
  <DeliveryAddress :address="addressList"></DeliveryAddress>
  <view class="nav">
    <CommodityNav :src="commodity.url" :title="commodity.title" :number="commodity.number" :price="commodity.price" :name="commodity.name"></CommodityNav>
  </view>
  <view class="order-freight">
    <view class="freight-title">运费</view>
    <view class="freight-price">￥0</view>
  </view>
  <view class="order-payment">
    <view class="payment-price">￥199</view>
    <view class="payment-num"> 共1件商品</view>
    <view class="payment-btn">
      <up-button text="立即支付" shape="circle" color="#FF416C" throttleTime="3000" @click="onPayment"></up-button>
    </view>
  </view>
</template>
<style lang="less" scoped>
  .nav{
    margin-top: 24rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 32rpx;
  }
  .order-freight{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 96rpx;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 28rpx 32rpx;
    margin-top: 24rpx;
    .freight-title{
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .freight-price{
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .order-payment{
    width: 100%;
    height: 100rpx;
    opacity: 1;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .payment-price{
      font-size: 48rpx;
      font-weight: 400;
      color: rgba(255, 65, 108, 1);
    }
    .payment-num{
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .payment-btn{
      width: 336rpx;

    }
  }
</style>